<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-edit"></i> 配置管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>邮箱配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class='form-box'>
      <el-form ref="edit"
               style="width:450px"
               :model="data"
               label-width="100px">
         <el-form-item label="开启推送"
                      prop="img_compress">
          <el-switch v-model="data.status"
                     active-value="1"
                     inactive-value="0">
          </el-switch>
          <p class="tips"><span>提示:</span> 开启后用户下单时会推送消息到收件箱</p>
        </el-form-item>
        <el-form-item label="发件箱"
                      style="width:100%">
          <el-input v-model="data.email"
                    maxlength="50"
                    placeholder="请输入发件邮箱"></el-input>
        </el-form-item>

        <el-form-item label="收件箱"
                      style="width:100%">
          <el-input type="text"
                    maxlength="50"
                    v-model="data.to_email"
                    placeholder="请输入收件邮箱"></el-input>
          <p class="tips"><span>提示:</span> 不设置收件箱默认将发件箱作为收件人</p>
        </el-form-item>
        <el-form-item label="邮箱服务器"
                      style="width:100%">
          <el-input type="text"
                    maxlength="250"
                    v-model="data.email_host"
                    placeholder="请输入邮箱服务器端口"></el-input>
          <p class="tips"><span>提示:</span> 例如:smtp.qq.com,可 <a title="点击查看" target="_blank" href="https://wenku.baidu.com/view/428a039e0b1c59eef9c7b4a0.html">参考</a></p>          
        </el-form-item>
        <el-form-item label="加密类型"
                      style="width:100%">
          <el-input type="text"
                    maxlength="250"
                    v-model="data.email_encryption"
                    placeholder="请输入邮箱服务器加密类型"></el-input>
          <p class="tips"><span>提示:</span> 一般为ssl</p>
        </el-form-item>
         <el-form-item label="邮箱端口"
                      style="width:100%">
          <el-input type="number"
                    maxlength="250"
                    v-model="data.email_port"
                    placeholder="请输入邮箱服务器端口,国内一般为465/25"></el-input>
          <p class="tips"><span>提示:</span> 国内一般为465,可 <a title="点击查看" target="_blank" href="https://wenku.baidu.com/view/428a039e0b1c59eef9c7b4a0.html">参考</a></p>
        </el-form-item>
        <el-form-item label="邮箱密码"
                      style="width:100%">
          <el-input type="text"
                    maxlength="50"
                    v-model="data.email_pass"
                    placeholder="请输入邮箱密码"></el-input>
            <p class="tips"><span>提示:</span> 也叫授权码可在邮箱运营商处获取,可<a title="点击查看" href="https://jingyan.baidu.com/article/6079ad0eb14aaa28fe86db5a.html" target="_blank">参考</a></p>
        </el-form-item>

        <el-form-item label="邮箱昵称"
                      style="width:100%">
          <el-input type="text"
                    maxlength="50"
                    v-model="data.email_name"
                    placeholder="请输入邮箱昵称"></el-input>
          <p class="tips"><span>提示:</span> 收件人看到的名称</p>
        </el-form-item>
          <el-form-item label="测试标题"
                      style="width:100%">
          <el-input type="text"
                    maxlength="50"
                    v-model="testData.title"
                    placeholder="请输入测试标题"></el-input>
          <p class="tips"><span>提示:</span> 测试标题和内容仅做当前测试用</p>
        </el-form-item>
         <el-form-item label="测试内容"
                      style="width:100%">
          <el-input type="textarea"
                    class='textarea-height'
                    maxlength="250"
                    v-model="testData.content"
                    placeholder="请输入测试内容"></el-input>
        </el-form-item>
        <p class="tips"><span>注意:</span> 请严格正确的配置,否则会导致系统无法正常运行,不确定时可先关闭推送</p>
        <div class="but-box">
          <el-button type="primary"
                     @click="testSend">测 试</el-button>
          <el-button type="primary"
                     @click="saveData">保 存</el-button>
        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      data: {
        status: '',
        email_encryption: '',
        email_host: '',
        email_name: '',
        email_pass: '',
        email_port: '',
        to_email: '',
        email: ''
      },
      testData:{
        content:'',
        title:''
      },
      getInfo () {
        let that = this;
        that.api.getEmailConfig(function (result) {
          that.data = result;
        });
      }
    }
  },

  created () {
    this.getInfo();
  },

  methods: {


    /**
     * 保存事件
     */
    saveData () {
      let that = this;
      this.api.editEmailConfig(that.data, function () {
        that.getInfo();
        that.$message.success('保存成功');
      });
    },

    /**
     * 测试发送
     */
    testSend(){
      let that=this;
        if(that.testContent==''){
            that.$message.error('请输入测试内容');
            return false;
        }
        that.api.testEmailSend(that.testData,function(res){
          that.$message.success(res.msg);
        });
    }

  }
}
</script>

<style  scoped>
.form-box {
    min-width: 360px;
    width: 80%;
    min-height: 70vh;
    padding: 2vh 2vh;
    background: #ffffff;
}
.but-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: nowrap row;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
.tips {
    width: auto;
    color: rgb(160, 160, 161);
    font-size: 12px;
}
.tips a{
  color:#70AFEF;
}
.tips > span {
    color: rgb(233, 142, 154);
}
</style>